import React, { Component } from "react";
import { Route, Switch, Redirect, withRouter } from "react-router-dom";
import { Layout, BackTop } from "antd";
import AppHeader from "./AppHeader.jsx";
import AppAside from "./AppAside.jsx";
import routes from "@/routes";
import avatar from "@/assets/images/user.jpg";
import "@/style/layout.less";
import { connect } from "react-redux";
import TheLoading from '@/components/TheLoading'
import SpinLoading from '@/components/TheLoading/SpinLoading.jsx'
const mapStateToProps = (state) => {
  return {
    user: state.user,
    loadStatus: state.loadStatus,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    openLoading: (data) => {
      dispatch({ type: "OPENPAGELOADING", data });
    },
    closeLoading: (data) => dispatch({ type: "CLOSEPAGELOADING", data }),
  };
};
const { Content } = Layout;

class DefaultLayout extends Component {
  state = {
    avatar,
    show: true,
    menu: [],
    menuToggle: false,
    loading: true,
    hasError: false
  };


  // componentDidCatch(error, errorInfo) {
  //   // 你同样可以将错误日志上报给服务器
  //   console.log('getDerivedStateFromError');
  // }
  isLogin = () => {
    if (!this.props.user) {
      this.props.history.push("/login");
    }
  };
  getMenu = menu => {
    let newMenu,
      auth = JSON.parse(localStorage.getItem("user")).auth;
    if (!auth) {
      return menu;
    } else {
      newMenu = menu.filter(res => res.auth && res.auth.indexOf(auth) !== -1);
      return newMenu;
    }
  };

  //记录增加token过期验证问题;
  componentDidMount() {
    this.isLogin();
  }

  UNSAFE_componentWillUnmount() {
    this.timer && clearTimeout(this.timer);
  }

  menuClick = () => {
    this.setState({ menuToggle: !this.state.menuToggle });
  };

  render() {
    let { menuToggle } = this.state;
    let { loadStatus } = this.props;
    let { auth } = JSON.parse(localStorage.getItem("user"))
      ? JSON.parse(localStorage.getItem("user"))
      : "";
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return (
      <Layout className="app">
        <BackTop />
        <AppAside menuToggle={menuToggle} menu={this.state.menu} />
        <Layout
          style={{ marginLeft: menuToggle ? "80px" : "200px", height: "100%", overflowY: 'hidden' }}
        >
          <AppHeader
            menuToggle={menuToggle}
            menuClick={this.menuClick}
            avatar={this.state.avatar}
            show={this.state.show}
            {...this.props}
          />
          <Content className="content" style={{ height: 'calc(100% - 100px)' }}>
            {/* <TheLoading loading={loadStatus} > */}
            <SpinLoading loading={loadStatus}></SpinLoading>
            <Switch>
              {routes.map((item) => {
                return (
                  <Route
                    key={item.path}
                    path={item.path}
                    exact={item.exact}
                    render={(props) =>
                      !auth ? (
                        <item.component {...props} />
                      ) : item.auth && item.auth.indexOf(auth) !== -1 ? (
                        <item.component {...props} />
                      ) : (
                        // 这里也可以跳转到 403 页面
                        <Redirect to="/404" {...props} />
                      )
                    }
                  />
                );
              })}
              <Redirect to="/404" />
            </Switch>
            {/* </TheLoading> */}
          </Content>
          {/* <AppFooter /> */}
        </Layout>
      </Layout>
    );
  }
}

export default withRouter(
  connect(mapStateToProps, mapDispatchToProps)(DefaultLayout)
);
